<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no">
<meta charset="utf-8">
<style>
*{padding: 0; margin: 0;}
#back-filter-container, #self-filter-container{
	height: 200px; margin: 10px; text-align: center; position: relative;
	line-height: 300px; font-size: 26px; font-weight: bold;
	color: darkred; text-stroke: 1px white; -webkit-text-stroke: 1px white;
}
#back-filter-container .bg-image{
	width: 100%; height: 100%; background: url(./bg1.webp) no-repeat; 
	background-size: 100% auto;
}
#back-filter-container .filter-mask{
	width: 100%; height: 200px; position: absolute; left: 0; bottom: 0px;
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); 
}
#self-filter-container .bg-image{
	width: 100%; height: 100%; background: url(./bg1.webp) no-repeat; 
	background-size: 100% auto; filter: blur(3px);
}
#self-filter-container .text-mask{
	width: 100%; height: 100%; position: absolute; left: 0; top: 0px;
}
</style>
</head>
<body>
	<div id="back-filter-container">
		<div class="bg-image"></div>
		<div class='filter-mask J_BackFilterMask'>backdrop-filter: blur(3px);</div>
	</div>
	<div id="self-filter-container">
		<div class="bg-image"></div>
		<div class='text-mask'>filter: blur(3px);</div>
	</div>
	<script>
		var BackFilterMaskElem = document.querySelector('.J_BackFilterMask');
		BackFilterMaskElem.addEventListener('click', () => {
			BackFilterMaskElem.style.height = '60px';
			BackFilterMaskElem.style.lineHeight = '60px';
			BackFilterMaskElem.style.backdropFilter = 'blur(5px)'; 
	}, false);
	</script>
</body>
</html>